We're using cookies, but you can turn them off in your browser settings. Otherwise, you are agreeing to our use of cookies. Learn more in our Privacy Policy.

Fact Box

HTML

<section class="grid-container">
    <div class="fact-box-set full-width">
        <aside class="fact-box">
            <dl>
                <dt class="fact-box-title">Fact Box Title</dt>
                <dd class="fact-box-stats">
                    <div class="fact-box-stats-stat">00<span class="fact-box-stats-stat-node"></span></div>
                    <div class="fact-box-stats-label">LABEL</div>
                    <div class="fact-box-stats-description">Fact box text goes here.</div>
                </dd>
            </dl>
        </aside>
        <aside class="fact-box">
            <dl>
                <dt class="fact-box-title">Fact Box Title</dt>
                <dd class="fact-box-stats">
                    <div class="fact-box-stats-stat">00<span class="fact-box-stats-stat-node"></span></div>
                    <div class="fact-box-stats-label">LABEL</div>
                    <div class="fact-box-stats-description">Fact box text goes here.</div>
                </dd>
            </dl>
        </aside>
        <aside class="fact-box">
            <dl>
                <dt class="fact-box-title">Program Exams</dt>
                <dd class="fact-box-stats">
                    <div class="fact-box-stats-stat">03<span class="fact-box-stats-stat-node"></span></div>
                    <div class="fact-box-stats-label">Exams</div>
                    <div class="fact-box-stats-description">You must pass an exam for each level of curriculum.</div>
                </dd>
            </dl>
        </aside>
        <aside class="fact-box">
            <dl>
                <dt class="fact-box-title">Global Coverage</dt>
                <dd class="fact-box-stats">
                    <div class="fact-box-stats-stat">90<span class="fact-box-stats-stat-node">+</span></div>
                    <div class="fact-box-stats-label">Locations</div>
                    <div class="fact-box-stats-description">CFA Institute operates in over 90 countries and regions.</div>
                </dd>
            </dl>
        </aside>
    </div>
</section>

Problem Being Solved

Users need to view dynamic information in a compelling presentation.

When to Use

The fact box should be used to display short, quickly scannable text. There should be benefit to showcasing the information.

When Not to Use

The fact box should not be used to display long text, or text that is of lesser importance.

Formatting

  • Place fact box set inside section that has the class name "grid-container"
  • The fact box set is now using CSS grid. This will handle all the spacing and fit each fact box in the available space accordingly.
  • If you don't have a description for the fact-box you don't have to fill that element in, but leave the element in place (removing it will mess up the grid layout).